<template>
  <!-- 上传图片 -->
  <div class="upload-page-container">
    <el-upload
        ref="uploadImage"
        action="/api/merchantsapi/common/upload/file"
        name="file"
        list-type="picture-card"
        :file-list="fileList"
        :on-preview="handlePictureCardPreview"
        :limit="limit"
        :on-success="handleAvatarSuccess"
        :on-remove="handleAcatarRemove"
        :headers="{'authentication': loginToken, 'x-header-client': 'WLTX-MERCHANTS-API'}">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        append-to-body>
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
  </div>
</template>
<script>
import $storage from '@/utils/storage.js'

export default {
  name: 'UploadImageFile',
  props: {
    limit: {
      type: Number,
      default: ()=> 1
    },
    uploadValue: {
      type: [String, Array, Number],
      default: ()=> null
    },
    valueType: {
      type: String,
      default: ()=> 'Array'
    },
    separators: {
      type: String,
      default: ()=> ","
    }
  },
  computed: {
    fileList: {
      get() {
        let showImages = []
        if(this.uploadValue && this.valueType && this.valueType === 'String') {
          String(this.uploadValue).split(this.separators).forEach(item=> {
            if(item && String(item).trim() !== ''){
              showImages.push({ url: item })
            }
          })
        }else if(this.uploadValue){
          Array(this.uploadValue).forEach(item=> {
            if(item && String(item).trim() !== '') {
              showImages.push({ url: item })
            }
          })
        }
        return showImages
      }
    }
  },
  data() {
    return {
      loginToken: $storage.getUserToken(),
      dialogVisible: false,
      dialogImageUrl: ''
    }
  },
  methods: {
    // 选择文件上传成功
    async handleAvatarSuccess(res){
      if(!res.data) this.$message.error('上传失败')
      let showImageList = []
      if(this.uploadValue){
        if(this.valueType && this.valueType === 'String') {
          showImageList = Array(this.uploadValue.split(this.separators)).map(item=> item && String(item).trim() !== '')
        }else {
          showImageList = Array(this.uploadValue)
        }
      }
      showImageList.push(res.data.url)
      let uploadImageValue = null
      if(this.valueType && this.valueType === 'String') {
        uploadImageValue = showImageList.join(this.separators)
      }else {
        uploadImageValue = showImageList
      }
      this.$emit('update:uploadValue', uploadImageValue)
      this.uploadChange()
    },

    async handleAcatarRemove(file, fileList){
      let showImageList = []
      fileList.forEach(item=> {
        showImageList.push(item.url)
      })
      let uploadImageValue = null
      if(this.valueType && this.valueType === 'String') {
        uploadImageValue = showImageList.join(this.separators).map(item=> item && String(item).trim() !== '')
      }else {
        uploadImageValue = showImageList
      }
      this.$emit('update:uploadValue', uploadImageValue)
      this.uploadChange()
    },

    // 预览图片
    handlePictureCardPreview(file){
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },

    // 添加change事件
    async uploadChange(){
      this.$emit('uploadChange')
    }
  }
}
</script>
<style lang="scss" scoped>
  .upload-page-container {
    width: 100%;

    ::v-deep .avatar-uploader {

      .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        width: 150px;
        height: 150px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }

      .el-upload:hover {
        border-color: #409EFF;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 128px;
        height: 128px;
        line-height: 128px;
        text-align: center;
      }
    }
  }
</style>